<template>
    <div style="margin: 3%  2%">

        <el-tabs :tab-position="tabPosition" type="border-card" v-model="value">
        <el-tab-pane label="试卷名称"  name="name">
            
            <el-form ref="exam" :model="exam" label-width="8%" >
            <el-form-item label="试卷名称">
                <el-input v-model="exam.paper.name" style="width:20%" placeholder="请输入试卷名称"></el-input>
            </el-form-item>

            <el-form-item label="试卷分类"  >
                <el-cascader
                v-model="exam.paper.categoryId"
                :options="options"
                :show-all-levels="false"
                ></el-cascader>
                
                <!-- <el-cascader-panel style="width:40%"  v-model="exam.paper.categoryId" :options="options"></el-cascader-panel> -->

            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add()">增加题目</el-button>
            </el-form-item>

        </el-form>

        </el-tab-pane>
        <el-tab-pane label="单选题"  name="select">
            
            <el-form ref="exam" :model="exam" label-width="80px" 
            >
                <div v-for="(select, index) in exam.selectList" :key="index"
                style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding:10px 20px 10px 20px;margin-bottom:3%" 
                 >
                
                <el-form-item
                    :label ="'第' + (index+1) + '题'"
                    :prop="'selectList.' + index + '.name'"
                    style="top:10%"
                
                >
                    <el-input v-model="select.name"  type="textarea" placeholder="请输入题目"
                    :autosize="{ minRows: 2, maxRows: 4}" style="width:50%"></el-input>
                </el-form-item>
                
                <el-form-item
                    label="选项A"
                    :prop="'selectList.' + index + '.optionA'"
                    >
                    <el-input v-model="select.optionA" placeholder="请输入选项A" ></el-input>
                </el-form-item>

                <el-form-item
                    label="选项B"
                    :prop="'selectList.' + index + '.optionB'"
                    >
                    <el-input v-model="select.optionB" placeholder="请输入选项B" ></el-input>
                </el-form-item>

                <el-form-item
                    label="选项C"
                    :prop="'selectList.' + index + '.optionC'"
                    >
                    <el-input v-model="select.optionC" placeholder="请输入选项C" ></el-input>
                </el-form-item>

                <el-form-item
                    label="选项D"
                    :prop="'selectList.' + index + '.optionD'"
                    >
                    <el-input v-model="select.optionD" placeholder="请输入选项D" ></el-input>
                </el-form-item>

                <el-form-item
                    label="正确答案"
                    :prop="'selectList.' + index + '.answer'"
                    >
                     <el-radio-group v-model="select.answer">
                        <el-radio :label="1">A</el-radio>
                        <el-radio :label="2">B</el-radio>
                        <el-radio :label="4">C</el-radio>
                        <el-radio :label="8">D</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item
                    label ="答案解析"
                    :prop="'selectList.' + index + '.analyse'"
                    
                >
                    <el-input v-model="select.analyse"  type="textarea" placeholder="请输入解析"
                    :autosize="{ minRows: 2, maxRows: 4}" style="width:50%"></el-input>
                    <el-button @click.prevent="removeSelect(select)" style="float:right">删除</el-button>
                </el-form-item>

            </div>
            </el-form>
            <el-button @click="addSelect">新增单选</el-button>
            <el-button type="primary" @click="editExam()">提交</el-button>

        </el-tab-pane>
        <el-tab-pane label="多选题">多选题</el-tab-pane>
        <el-tab-pane label="判断题">判断题</el-tab-pane>
        </el-tabs>

       
    </div>
</template>

<script>
import examApi from '@/api/exam'
import addExamApi from '@/api/addexam'

export default {
    data(){
        return{
            pid:null,
            tabPosition: 'left',
            value:"name",
            cid:null,
            exam:{
                selectList:[{
                    name:'',
                    optionA:'',
                    optionB:'',
                    optionC:'',
                    optionD:'',
                    answer:'',
                    analyse:'',
                }]
            },
            options:[],
        }
    },

    created () {
        this.fetchOptions()
        this.pid = this.$route.query.pid
        this.queryPaper()
    },

    methods: {
        
        queryPaper(){
            examApi.queryPaperById(this.pid).then(response =>{
            if(response.flag){
                this.exam = response.data
            }
            })
        },

        add(){//增加题目 切换标签
            this.value = "select"
        },

        fetchOptions(){ //得到分类列表
            examApi.getOptions().then(response =>{
            this.options = response
            //this.exam.selectList.splice(0, 1)
            })
        },

        addSelect(){ //添加单选
            this.exam.selectList.push({
                id:null,
                name:'',
                optionA:'',
                optionB:'',
                optionC:'',
                optionD:'',
                answer:'',
                analyse:'',
            })
        },

        removeSelect(select) { //移除题目
        var index = this.exam.selectList.indexOf(select)
        if (index !== -1) {
          this.exam.selectList.splice(index, 1)
        }
      },

      editExam(){
        if(this.exam.paper.categoryId.length == 2){          
             this.exam.paper.categoryId = this.exam.paper.categoryId.pop()
        }
        addExamApi.edit(this.exam).then(response =>{
            alert("修改成功")
        })
      }
    }
}
</script>

